<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" :visible.sync="showDialog" @open="onOpen" @close="onClose"
               title="修改用户">

      <el-table
        ref="multipleTable"
        :data="roleList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>

        <el-table-column
          prop="rId"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="roleDesc"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-button @click="addRole">commit</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "AddRole",
    // 接受父组件传递的值
    props: {
      uId: {type: String},
      addRoleVisible: {
        type: Boolean,
        default:
          false
      }
      ,
    }
    ,
    data() {
      return {
        formData: {
          uId: undefined,
          roleId: undefined,
        },
        // 控制弹出框显示隐藏

        showDialog: false,
        roleList: [],
        users_roles: {
          uId: undefined,
          roleId: undefined
        },
        users_rolesList: []
      }
    }
    ,
    computed: {}
    ,
    watch: {
      // 监听 addOrUpdateVisible 改变
      addRoleVisible(oldVal, newVal) {
        this.showDialog = this.addRoleVisible;
        this.$axios.get("/sys/roles/",).then((response) => {
          console.log(this.uId)
          this.roleList = response.data.data;
          // this.image=response.data.data.imgUrl;
          console.log(this.roleList);
        });
      }
    }
    ,
    created() {


    }
    ,
    mounted() {
    }
    ,
    methods: {
      handleSelectionChange(val) {
        console.log(val.length)
        for (var i = 0; i < val.length; i++) {
          this.users_rolesList.push({
            uId: this.uId,
            roleId: val[i].rId
          })
        }
      },
      addRole() {
        this.$axios.post("/sys/users/role/", this.users_rolesList).then((response) => {
        });
        location.reload()
      }
      ,
      onOpen() {
      },
      onClose() {
        // this.$refs['elForm'].resetFields()
        this.$emit('changeShowAddRole', 'false')
      }
      ,
      close() {
        this.$emit('changeShowAddRole', 'false')
      },

      async handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return;
          console.log(this.formData.createDate)
          this.$axios.put("/sys/users/" + this.uId, this.formData).then((response) => {

            console.log(this.eId)
          });
          // this.onClose();
          location.reload()
        })
      }

    }
  }
</script>

<style scoped>

</style>
